import { useContext, useEffect, useReducer } from 'react'
import { Modal } from 'antd'
import ModalContext from './ModalContext'
import useModal from './useModal'
import type { IProps } from './type'

const WyfModal = (props: IProps) => {
	const contextValue = useContext(ModalContext)
	// const { } = props
	const { open, setUpdateFunc, setModal } = contextValue

	const [, update] = useReducer((num: number) => num + 1, 0)

	useEffect(() => {
		setUpdateFunc(() => update())
	}, [])

	return (
		<Modal {...props} title="测试hook方式调用组件" open={open} onCancel={() => setModal(false)} />
	)
}

const App = (props: IProps) => {
	const { modal } = props

	const [modalRef] = useModal(modal)

	return (
		<ModalContext.Provider value={modalRef}>
			<WyfModal {...props} />
		</ModalContext.Provider>
	)
}

export default App
